<template>
  <div class="anchor-manag-waper">
    <a-spin class="anchor-manag-desc" tip="加载中..." :spinning="isLoading">
      <section>
        <!-- 基础信息 -->
        <div style="position:relative">
          <Title :conf="{ title: '基础信息', src: require('@/assets/images/zbgl_jichu.png') }" />
          <a-button type="primary" @click="editFn" class="edit-btn">编辑<a-icon type="edit"/></a-button>
          <a-descriptions>
            <a-descriptions-item label="姓名">{{ desc.name || '无' }}</a-descriptions-item>
            <a-descriptions-item label="电话">{{ desc.phoneNumber || '无' }}</a-descriptions-item>
            <a-descriptions-item label="身份证号">{{ desc.idCard || '无' }}</a-descriptions-item>
            <a-descriptions-item label="达人ID">{{ desc.idSign || '无' }}</a-descriptions-item>
            <a-descriptions-item label="类型" :span="2">{{ desc.accountTypeContent || '无' }}</a-descriptions-item>
            <a-descriptions-item label="身份证照片" :span="3">
              <upload v-show="desc.idCardFrontUrl || desc.idCardBackUrl" disabled :limit="1" :value="[desc.idCardFrontUrl, desc.idCardBackUrl]"></upload>
              <span v-show="!desc.idCardBackUrl && !desc.idCardFrontUrl">无</span>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </section>

      <!-- 合同信息 -->
      <section style="padding-bottom:24px" class="contract-info">
        <!-- 提现信息 -->
        <div>
          <Title :conf="{ title: '提现信息', src: require('@/assets/images/zbgl_tixian.png') }" />
          <a-descriptions>
            <a-descriptions-item label="收款账户类型">{{ desc.accountTypeContent || '无' }}</a-descriptions-item>
            <a-descriptions-item label="开户行名称">{{ desc.bankName || '无' }}</a-descriptions-item>
            <a-descriptions-item label="收款账户卡号">{{ desc.cardNumber || '无' }}</a-descriptions-item>
            <a-descriptions-item label="开户人名称">{{ desc.accountName || '无' }}</a-descriptions-item>
            <a-descriptions-item label="身份证号" :span="2">{{ desc.idNumber || '无' }}</a-descriptions-item>

            <a-descriptions-item label="银行卡截图" :span="1">
              <upload v-show="desc.bankCardUrl" disabled :limit="1" :value="[desc.bankCardUrl]"></upload>
              <span v-show="!desc.bankCardUrl">无 </span>
            </a-descriptions-item>
            <a-descriptions-item label="开户行截图" :span="1">
              <upload v-show="desc.bankUrl" disabled :limit="1" :value="[desc.bankUrl]"></upload>
              <span v-show="!desc.bankUrl">无</span>
            </a-descriptions-item>
          </a-descriptions>
        </div>
        <Title :conf="{ title: '合作信息', src: require('@/assets/images/zbgl_hetong.png') }" />
        <a-descriptions>
          <a-descriptions-item label="结算类型">{{ desc.settlementTypeContent || '无' }}</a-descriptions-item>
          <a-descriptions-item :label="desc.moneyContent || '金额'">{{ (desc.money / 100).toFixed(2) || '0' }}</a-descriptions-item>
          <a-descriptions-item label="合作时间">{{ desc.cooperateStartTime || '无' }}-{{ desc.cooperateEndTime || '无' }}</a-descriptions-item>
        </a-descriptions>
        <a-descriptions>
          <a-descriptions-item label="合同" :span="3">
            <upload v-show="desc.urlList" disabled :limit="1" :value="desc.urlList || []"></upload>
            <span v-show="!desc.urlList">无</span>
          </a-descriptions-item>
        </a-descriptions>

        <!-- <div class="action">
        <a-button type="default" @click="handleCancel">取消</a-button>
        <a-button type="primary" style="background:#1D6FE9" @click="handleSubmitContract">提交</a-button>
      </div> -->
      </section>
      <!-- 编辑 -->
      <a-modal class="copy-modal" width="680px" :footer="null" :visible="editModal" title="编辑" @cancel="editModal = false">
        <a-spin tip="提交中..." :spinning="isEditLoading">
          <div class="apply-info">
            <Title :conf="{ title: '基础信息', src: require('@/assets/images/zbgl_jichu.png') }" />
            <div class="apply-info-box">
              <a-form-model ref="editModalForm" :model="editModalForm" :rules="editRules" :label-col="{ span: 8 }" :wrapper-col="{ span: 14 }">
                <a-row>
                  <a-col :span="12" props="">
                    <a-form-model-item label="姓名：">{{ desc.name || '无' }}</a-form-model-item>
                  </a-col>
                  <a-col :span="12" props="">
                    <a-form-model-item label="电话：">{{ desc.phoneNumber || '无' }}</a-form-model-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12" props="">
                    <a-form-model-item label="达人ID：">{{ desc.idSign || '无' }}</a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="身份证号：">
                      <a-input v-model="editModalForm.idCard" type="text"></a-input>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">
                    <a-form-model-item label="账号类型" prop="accountTypeContent">
                      {{ desc.accountTypeContent || '' }}
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="12">
                    <a-form-model-item label="主播平台" prop="platform">
                      <a-select v-model="editModalForm.platform" @change="selectPlatform" class="filter-select" placeholder="请选择主播平台">
                        <a-select-option v-for="item in platformList" :key="item.id" :value="item">{{ item }}</a-select-option>
                        <a-select-option value="">新增平台</a-select-option>
                      </a-select>
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="24">
                    <a-form-model-item label="身份证照片" :label-col="{ span: 4 }" :wrapper-col="{ span: 19 }">
                      <upload v-show="desc.idCardFrontUrl || desc.idCardBackUrl" disabled :limit="2" :value="[desc.idCardFrontUrl, desc.idCardBackUrl]"></upload>
                      <span v-show="!desc.idCardBackUrl && !desc.idCardFrontUrl">无</span>
                    </a-form-model-item>
                  </a-col>
                </a-row>
              </a-form-model>
            </div>
          </div>
          <div style="text-align:center;">
            <a-button type="" @click="editModal = false" style="margin-right:20px;">取消</a-button>
            <a-button type="primary" @click="saveInfo()" style="background:#1D6FE9">保存</a-button>
          </div>
        </a-spin>
      </a-modal>
      <a-modal title="新增平台" width="400px" :footer="null" :visible="addPlatformVisible" :confirm-loading="confirmLoading" @ok="handleAddOk" @cancel="handleAddCancel">
        <a-input type="text" :maxLength="10" v-model="newPlatformName" placeholder="请输入平台名称，如抖音"></a-input>
        <p class="remind-text"><a-icon type="info-circle" style="margin-right:5px;" />平台名称不可重复</p>
        <div style="text-align:center;">
          <a-button type="" @click="handleAddCancel" style="margin-right:20px;">取消</a-button>
          <a-button type="primary" @click="handleAddOk()" style="background:#1D6FE9">确定</a-button>
        </div>
      </a-modal>
    </a-spin>
  </div>
</template>

<script>
import Title from './components/Title'
import upload from '@/components/upload/upload'
import { anchorPersonalDesc as anchorPersonalDescApi, submitAnchorPersonaContract as submitAnchorPersonaContractApi, platformList, insertPlatform, updateAnchorsInfo } from '@/service'

export default {
  name: 'anchorManagDesc',
  data() {
    return {
      // loading
      isLoading: false,
      // 提交loading
      isEditLoading: false,
      // 详情信息
      desc: [],
      // 合同信息
      urlList: [],
      // 编辑
      editModal: false,
      editModalForm: [],
      editRules: {
        type: [
          {
            required: true,
            message: 'Please choose Activity type',
            trigger: 'blur'
          }
        ]
      },
      // 新增平台
      addPlatformVisible: false,
      confirmLoading: false,
      // 平台列表
      platformList: [],
      // 新增平台名字
      newPlatformName: ''
    }
  },

  components: {
    Title,
    upload
  },

  methods: {
    /**
     * 提交合同
     * @returns {void}
     */
    handleSubmitContract() {
      const {
        $confirm,
        urlList,
        $messageSend,
        $route: {
          query: { id, accountType: role }
        }
      } = this

      if (!urlList.length) {
        $messageSend.error('请上传合同图片')
        return
      }

      $confirm({
        title: '提示',
        content: '确定提交合同图片',
        onOk: () => {
          // 发送请求
          return submitAnchorPersonaContractApi({
            id,
            urlList,
            role
          })
            .then((rs) => {
              $messageSend.success('操作成功')
              this.$router.push({ path: this.$route.query.breadCrumbs })
            })
            .catch((err) => err)
        }
      })
    },

    /**
     * 取消按钮点击
     * @returns {void}
     */
    handleCancel() {
      this.$router.go(-1)
    },
    // 编辑
    editFn() {
      this.getPlatformList().then(() => {
        this.editModal = true
      })
    },
    // 选择平台
    selectPlatform(e = '') {
      console.log(e)
      if (e === '') {
        this.addPlatformVisible = true
      }
    },
    handleAddOk(e) {
      if (this.newPlatformName) {
        this.confirmLoading = true
        insertPlatform({ platform: this.newPlatformName })
          .then((res) => {
            this.$messageSend.success('新增成功')
            this.confirmLoading = false
          })
          .finally(() => {
            this.addPlatformVisible = false
            this.getPlatformList()
            this.editModalForm.platform = this.newPlatformName
          })
      } else {
        this.$messageSend.success('请输入新增平台名称')
        return false
      }
    },
    handleAddCancel(e) {
      const { platform } = this.desc || {}
      this.addPlatformVisible = false
      this.newPlatformName = ''
      this.editModalForm.platform = platform
    },
    // 保存基本信息
    saveInfo() {
      const { idCard, platform } = this.editModalForm
      if (!idCard) {
        this.$messageSend.error('请输入身份证号')
        return false
      }
      if (!platform) {
        this.$messageSend.error('请选择主播平台')
        return false
      }
      this.isEditLoading = true
      updateAnchorsInfo(this.editModalForm)
        .then((res) => {
          this.editModal = false
          location.reload()
        })
        .finally(() => {
          this.isEditLoading = false
        })
    },
    getPlatformList() {
      return new Promise((resolve) => {
        platformList()
          .then((res = []) => {
            this.platformList = res
            resolve(res)
          })
          .catch((error) => {
            console.log(error)
          })
      })
    }
  },

  mounted() {
    const {
      $route: { query }
    } = this
    // 获取详情
    this.isLoading = true
    anchorPersonalDescApi({
      id: query.id,
      type: query.accountType
    })
      .then((rs = {}) => {
        this.urlList = rs.urlList || []

        this.desc = Object.freeze(rs)
        const { idCard, platform, id, accountType } = this.desc || {}
        this.editModalForm = {
          idCard,
          platform,
          id,
          role: accountType
        }
      })
      .finally(() => {
        this.isLoading = false
      })
  }
}
</script>

<style lang="less" scoped>
.anchor-manag-waper {
  width: 100%;
  height: 100%;
  background: #f6f6f6;
}
.anchor-manag-desc {
  padding: 16px 0;
  width: 960px;
  margin: 0 auto;

  .ant-spin-container {
    > section {
      padding: 10px 10px 8px 10px;
      background: #fff;
      margin-bottom: 16px;
      border-radius: 10px;

      .title {
        margin-bottom: 18px;
      }

      //  描述列表样式覆盖
      /deep/ .ant-descriptions-view {
        padding: 0px 20px;

        .ant-descriptions-item {
          vertical-align: baseline;
        }

        .ant-descriptions-item-label {
          color: #666666;
        }

        .ant-descriptions-item-content {
          color: #333;
          vertical-align: text-top;
        }
      }
    }

    // 合同信息
    .contract-info {
      /deep/ .ant-descriptions-item-content {
        width: auto;
        display: inline-block;
      }

      // 合同信息操作
      .action {
        margin-top: 40px;
        padding: 0px 20px;

        > button {
          margin-right: 20px;
        }
      }
    }
  }
}
.edit-btn {
  position: absolute;
  right: 10px;
  top: 10px;
  background: #1d6fe9;
}
.color-red {
  color: #f55f4e;
}
/deep/ .ant-form-item {
  margin-bottom: 8px;
}
.remind-text {
  color: #ff8712;
  font-size: 12px;
  text-align: center;
  margin-top: 12px;
}
</style>
